<template>
  <div class="page">
    <Header />
    <!-- 轮播 -->
   
    <swiper  ref="mySwiper" class="home_banner" :options="swiperOption">
      <swiper-slide  v-for="(item,id) in banner" :key="id">
        <img :src="item.path" />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper  >
   
    
    <RecommendList />
    <Hot/>
  </div>
</template>
<script>
import Header from "@components/home/header";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import {mapState} from "vuex";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import RecommendList from "@components/home/RecommendList"
import Hot from "@components/home/hot"
export default {
  name: "Home",
  data() {
    return {
      banner: [
        {
          activityId: "107435",
          id: " 280727",
          path:
            "https://s2.showstart.com/img/2020/20200219/de1c369779e24a0c93ca373ba9acaf49_1125_450_252503.0x0.jpg?imageMogr2/thumbnail/!750x300r/gravity/Center/crop/!750x300",
          url: "https://www.showstart.com/event/107435"
        },
        {
          activityId: "106571",
          id: "278331",
          path:
            "https://s2.showstart.com/img/2020/20200212/4ad7ac9bb62f4f2d86019045eaf65ee7_1125_450_148171.0x0.jpg?imageMogr2/thumbnail/!750x300r/gravity/Center/crop/!750x300",
          url: "https://www.showstart.com/event/106571"
        },
        {
          activityId: "99476",
          id: "260561",
          path:
            "https://s2.showstart.com/img/2020/20200210/fe305918682d4a28936fe903d925b476_1125_450_223082.0x0.jpg?imageMogr2/thumbnail/!750x300r/gravity/Center/crop/!750x300",
          url: "https://www.showstart.com/event/99476"
        },
        {
          activityId: "108029",
          id: "281650",
          path:
            "https://s2.showstart.com/img/2020/20200115/49733c8143da4d30b6cb5daf8a1f60b9_1125_450_166157.0x0.jpg?imageMogr2/thumbnail/!750x300r/gravity/Center/crop/!750x300",
          url: "https://www.showstart.com/event/108029"
        }
      ],
     computed:{
         
        
     },
      swiperOption: {
        autoplay: {
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination"
        }
      }
    };
  },
  components: {
    Header,
    swiper,
    swiperSlide,
    RecommendList,
    Hot
  },
  created() {
    this.$store.dispatch("homepage/getHomepage");
  }
};
</script>
<style scoped>
.page{
   overflow-x: hidden;
}
.home_banner,
.home_banner img {
  width: 100%;
  height: 150px;
  position: relative;
    overflow: hidden;

}

.home_banner ul {
  height: 100%;
  position: absolute;
}

.home_banner ul li {
  float: left;
}
.swiper-pagination-bullet-active {
  background: red;
}
</style>